<template>
  <div>
    <Card class="card clear-float">
      <p class="card-title" slot="title">{{$t('quOliS_3_FLrRga4WMi-f')}}</p>
      <div class="wrap-operate-container">
        <div class="wrap-operate-area" style="width: 95%;">
          <!-- <div class="operate-input-item">
            <Input v-model="pileCode" @on-enter="queryTable">
              <span slot="prepend">{{$t('ukexJfHe1YBGx8B9XnGdu')}}：</span>
              <Button
                slot="append"
                icon="ios-search"
                @click="queryTable"
              ></Button>
            </Input>
          </div> -->
          <div class="operate-select-item">
            <label class="title">{{$t('ukexJfHe1YBGx8B9XnGdu')}}:</label>
            <div class="content">
              <Select
                v-model="pileCode"
                style="width: 200px"
              >
                <Option
                  v-for="item in stationInfos"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.id }}({{ item.name }})
                </Option>
              </Select>
            </div>
          </div>
          <div class="operate-input-item">
            <Input v-model="gunNumber" @on-enter="queryTable">
              <span slot="prepend">{{$t('wgRc7OlPa8xt5Gum1570-')}}：</span>
              <Button
                slot="append"
                icon="ios-search"
                @click="queryTable"
              ></Button>
            </Input>
          </div>
          <div class="operate-timepicker-item">
            <label class="title">{{$t('iezrwIPqa_uDAOgw9K85J')}}:</label>
            <div class="content">
              <DatePicker
                v-model="timescope"
                type="datetimerange"
                format="yyyy-MM-dd HH:mm:ss"
                :placeholder="$t('4yP5zHObfE9vFzhk3a6yk')"
                style="width: 300px"
                :options="datepickOptions"
              ></DatePicker>
            </div>
          </div>
          <div class="operate-btn-item">
            <Button class="item" type="info" icon="ios-search" @click="queryTable"
              >{{$t('9ZYL6riI1fheWqEf_uo-M')}}</Button
            >
            <Button
              class="item"
              type="info"
              icon="ios-card"
              @click="exportExcel"
              >{{$t('ssHl1qTS2oMuNp3RZnkQY')}}</Button
            >
          </div>
        </div>
        <!-- <div class="wrap-indicate-area" style="width: 80%; margin: 10px 0;">
          <div class="indicate-item">
            <label class="title">{{$t('XVGOywKkHYeCjM5b1JHVO')}}：</label>
            <span class="content">{{ count }}</span>
          </div>
          <div class="indicate-item">
            <label class="title">{{$t('PuZBkrm-5EoN79Q7ClmDC')}}(kWh)：</label>
            <span class="content">{{ electric }}</span>
          </div>
          <div class="indicate-item">
            <label class="title">{{$t('UrRW1TPYc3O8ze3OO8auz')}}({{$t('rEwoS7D6EkR6EPGHSq6MU')}})：</label>
            <span class="content">{{ money }}</span>
          </div>
          <div class="indicate-item">
            <label class="title">{{$t('CXryvEgstPDHzRzGTlXI7')}}({{$t('rEwoS7D6EkR6EPGHSq6MU')}})：</label>
            <span class="content">{{ pumpedIncome }}</span>
          </div>
          <div class="indicate-item">
            <label class="title">{{$t('qHSl39HW3iQCSU6ue_Lmi')}}(kWh)：</label>
            <span class="content">{{ cuspelect }}</span>
          </div>
          <div class="indicate-item">
            <label class="title">{{$t('ng6ofc8iIPQwALSXS2Gc3')}}(kWh)：</label>
            <span class="content">{{ peakelect }}</span>
          </div>
          <div class="indicate-item">
            <label class="title">{{$t('Q6GKnQqFJSuf6zl_oJJV_')}}(kWh)：</label>
            <span class="content">{{ flatelect }}</span>
          </div>
          <div class="indicate-item">
            <label class="title">{{$t('hHrpxlqPeykIlo0elNOew')}}(kWh)：</label>
            <span class="content">{{ valleyelect }}</span>
          </div>
          <div class="indicate-item">
            <label class="title">{{$t('sxAt-jm3sLdAMdQ2ikVrk')}}({{$t('rEwoS7D6EkR6EPGHSq6MU')}})：</label>
            <span class="content">{{ cuspmoney }}</span>
          </div>
          <div class="indicate-item">
            <label class="title">{{$t('uu5mBR2Seq62JH78Ichrc')}}({{$t('rEwoS7D6EkR6EPGHSq6MU')}})：</label>
            <span class="content">{{ peakmoney }}</span>
          </div>
          <div class="indicate-item">
            <label class="title">{{$t('wEpjuPFt-oKpiBJbixUI0')}}({{$t('rEwoS7D6EkR6EPGHSq6MU')}})：</label>
            <span class="content">{{ flatmoney }}</span>
          </div>
          <div class="indicate-item">
            <label class="title">{{$t('SRD5Ld59tJ259-VQ6FTOc')}}({{$t('rEwoS7D6EkR6EPGHSq6MU')}})：</label>
            <span class="content">{{ valleymoney }}</span>
          </div>
        </div> -->
      </div>
      <Table 
        ref="table" 
        :loading="loading" 
        :columns="columns" 
        :data="data" 
        no-filtered-data-text=""
      />
    </Card>
  </div>
</template>

<script>
import moment from 'moment'
import { queryChargeProcess, getEquipmentlist } from '@/api/data2'

export default {
  name: 'pile_log_record',
  data () {
    return {
      stationInfos: [],
      pileCode: '',
      gunNumber: '',
      starttime: moment().subtract(2, 'hours').format('YYYY-MM-DD HH:mm:ss'),
      endtime: moment().format('YYYY-MM-DD HH:mm:ss'),
      // timescope: [moment(0, 'HH').toDate(), moment().toDate()],

      count: '',
      electric: '',
      money: '',
      pumpedIncome: '',
      cuspelect: '',
      peakelect: '',
      flatelect: '',
      valleyelect: '',
      cuspmoney: '',
      peakmoney: '',
      flatmoney: '',
      valleymoney: '',
      loading: false,
      columns: [
        {
          title: this.$t('pfCKr_aRAOfo7RtXQCfFx'),
          key: 'id',
          width: 100,
          fixed: 'left'
        },
        {
          title: this.$t('NNqwsiYKNFh8WR5Mvlwed'),
          key: 'stationname',
          width: 150,
          fixed: 'left'
        },
        {
          title: this.$t('dUE9V6jUHBdS6m9avfiqp'),
          key: 'equipmentname',
          width: 150
        },
        {
          title: this.$t('ukexJfHe1YBGx8B9XnGdu'),
          key: 'equipmentid',
          width: 150
        },
        {
          title: this.$t('OBojq5D694WY1CWDUxEBu'),
          key: 'number',
          width: 150
        },
        {
          title: this.$t('KX0vdZ0kJD-tz0ZoNU99D'),
          key: 'devicedt',
          width: 150
        },
        {
          title: this.$t('VWqF2Hj2bK46-1dBWkE0n'),
          key: 'systemdt',
          width: 150
        },
        {
          title: this.$t('T9QoCdSJyYoEgsgA8EaqL'),
          key: 'datastr',
          width: 500
        }
      ],
      data: [],
      tableExcelName: this.$t('pile_log_record'),
      datepickOptions: {
        disabledDate: function (date) {
          return Date.now() < moment(date).valueOf()
        }
      }
    }
  },
  computed: {
    timescope: {
      get () {
        return [this.starttime, this.endtime]
      },
      set (val) {
        this.starttime = moment(val[0]).format('YYYY-MM-DD HH:mm:ss')
        this.endtime = moment(val[1]).format('YYYY-MM-DD HH:mm:ss')
      }
    }
  },
  async mounted () {
    this.queryStation()
    this.queryTable()
  },
  methods: {
    async queryStation () {
      const { code, data, desc } = await getEquipmentlist({
        // pileCode,
        // pileName,
        // pileType,
        stationid: this.$store.state.user.stationId
      })
      if (code == 200) {
        this.stationInfos = data.datalist || []
      } else {
        this.$Message.error(desc)
      }
    },
    async queryTable () {
      this.loading = true
      const { code, data, desc } = await queryChargeProcess({
        condition: {
          'equipmentid': this.pileCode, // 桩编号
          'number': +this.gunNumber, // 枪号   0表示不判断枪号 >0有效
          'starttime': this.starttime, // 查询起始时间 >=
          'endtime': this.endtime // 查询结束时间 <=
        }
      })
      if (code == 200) {
        // const sumvalue = data.sumvalue
        // _.forEach(sumvalue, (v, k) => {
        //   this[k] = v
        // })
        this.data = data.datalist || []
      } else {
        this.$Message.error(desc)
      }
      this.loading = false
    }
  }
}
</script>

<style></style>
